import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { ChevronRight, Clock, BarChart2, Award, Book, Heart, ArrowLeft, Utensils, Droplet, Coffee, Users, Scale } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 定义营养计划类型
interface NutritionPlan {
  id: string;
  title: string;
  calories: number;
  protein: number;
  carbs: number;
  fat: number;
  meals: Meal[];
}

// 定义餐食类型
interface Meal {
  id: string;
  name: string;
  description: string;
  ingredients: Ingredient[];
  calories: number;
  protein: number;
  carbs: number;
  fat: number;
  image: string;
}

// 定义食材类型
interface Ingredient {
  name: string;
  amount: string;
  calories: number;
  protein: number;
  carbs: number;
  fat: number;
}

// 计算基础代谢率 (BMR) - 使用Mifflin-St Jeor公式
const calculateBMR = (weight: number, height: number, age: number, isMale: boolean): number => {
  if (isMale) {
    return 10 * weight + 6.25 * height - 5 * age + 5;
  } else {
    return 10 * weight + 6.25 * height - 5 * age - 161;
  }
};

// 计算每日总能量消耗 (TDEE)
const calculateTDEE = (bmr: number, activityLevel: string): number => {
  const activityMultipliers: Record<string, number> = {
    sedentary: 1.2,
    lightlyActive: 1.375,
    moderatelyActive: 1.55,
    veryActive: 1.725,
    extremelyActive: 1.9
  };
  
  return bmr * activityMultipliers[activityLevel];
};

// 示例减脂餐计划数据
const sampleNutritionPlan: NutritionPlan = {
  id: 'fat-loss-plan',
  title: '183cm/75kg 减脂餐计划',
  calories: 1800,
  protein: 150,
  carbs: 150,
  fat: 60,
  meals: [
    {
      id: 'breakfast',
      name: '早餐',
      description: '营养均衡的早餐，提供上午所需能量',
      ingredients: [
        { name: '燕麦片', amount: '50g', calories: 185, protein: 6, carbs: 32, fat: 3 },
        { name: '鸡蛋', amount: '2个', calories: 140, protein: 12, carbs: 1, fat: 10 },
        { name: '蓝莓', amount: '50g', calories: 28, protein: 0.5, carbs: 7, fat: 0.2 },
        { name: '杏仁', amount: '10颗', calories: 69, protein: 2.5, carbs: 2, fat: 6 },
        { name: '无糖豆浆', amount: '200ml', calories: 70, protein: 6, carbs: 4, fat: 3 }
      ],
      calories: 500,
      protein: 27,
      carbs: 46,
      fat: 22,
      image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=healthy%20breakfast%20oatmeal%20with%20blueberries%20and%20nuts&sign=6d75d00d1516aaddae1fe4bbf533d16c'
    },
    {
      id: 'lunch',
      name: '午餐',
      description: '高蛋白、适量碳水的午餐，增强饱腹感',
      ingredients: [
        { name: '鸡胸肉', amount: '150g', calories: 165, protein: 31, carbs: 0, fat: 4 },
        { name: '糙米饭', amount: '100g', calories: 111, protein: 2.6, carbs: 23, fat: 0.9 },
        { name: '西兰花', amount: '150g', calories: 45, protein: 3.6, carbs: 7, fat: 0.4 },
        { name: '彩椒', amount: '100g', calories: 31, protein: 1, carbs: 7, fat: 0.3 },
        { name: '橄榄油', amount: '10g', calories: 90, protein: 0, carbs: 0, fat: 10 }
      ],
      calories: 600,
      protein: 48,
      carbs: 50,
      fat: 20,
      image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=healthy%20lunch%20grilled%20chicken%20with%20brown%20rice%20and%20vegetables&sign=cb411941e1bbff57ca893e82c572daee'
    },
    {
      id: 'dinner',
      name: '晚餐',
      description: '低热量、易消化的晚餐，适合减脂期间食用',
      ingredients: [
        { name: '三文鱼', amount: '120g', calories: 207, protein: 22, carbs: 0, fat: 13 },
        { name: '蒸红薯', amount: '100g', calories: 103, protein: 2, carbs: 23, fat: 0.2 },
        { name: '菠菜', amount: '150g', calories: 23, protein: 2.9, carbs: 3.6, fat: 0.4 },
        { name: '豆腐', amount: '80g', calories: 55, protein: 6, carbs: 1.5, fat: 3 },
        { name: '芝麻油', amount: '5g', calories: 45, protein: 0, carbs: 0, fat: 5 }
      ],
      calories: 500,
      protein: 44,
      carbs: 42,
      fat: 24,
      image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=healthy%20dinner%20salmon%20with%20sweet%20potato%20and%20spinach&sign=370f132d76ecd63ae7e37d621d7b5a5e'
    },
    {
      id: 'snack',
      name: '加餐',
      description: '低热量健康零食，缓解饥饿感',
      ingredients: [
        { name: '希腊酸奶', amount: '100g', calories: 59, protein: 10, carbs: 3, fat: 0.4 },
        { name: '苹果', amount: '100g', calories: 52, protein: 0.3, carbs: 14, fat: 0.2 },
        { name: '原味蛋白粉', amount: '10g', calories: 37, protein: 8, carbs: 1, fat: 0.5 }
      ],
      calories: 200,
      protein: 21,
      carbs: 24,
      fat: 4,
      image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=healthy%20snack%20greek%20yogurt%20with%20apple%20and%20protein%20powder&sign=0c56bb573d5b77c487e5f69636204a72'
    }
  ]
};

// 饮食计划制定指南数据
const nutritionGuidelines = {
  sections: [
    {
      id: 'calorie-calculation',
      title: '计算每日热量需求',
      icon: <Scale size={24} />,
      description: '了解自己的基础代谢率(BMR)和每日总能量消耗(TDEE)是制定饮食计划的基础。减脂期间通常需要在TDEE基础上减少300-500卡路里。',
      steps: [
        '计算基础代谢率(BMR)',
        '根据活动水平确定每日总能量消耗(TDEE)',
        '设定合理的热量缺口(通常为300-500大卡)',
        '定期监测体重变化，调整热量摄入'
      ]
    },
    {
      id: 'macronutrients',
      title: '三大营养素比例分配',
      icon: <BarChart2 size={24} />,
      description: '蛋白质、碳水化合物和脂肪是人体必需的三大营养素，合理的比例分配对于减脂和维持肌肉非常重要。',
      steps: [
        '蛋白质：占总热量的25%-35%，每公斤体重1.6-2.2克',
        '碳水化合物：占总热量的40%-50%，选择复合碳水化合物',
        '脂肪：占总热量的20%-30%，优先选择健康脂肪',
        '根据个人目标和身体反应调整比例'
      ]
    },
    {
      id: 'food-selection',
      title: '食物选择原则',
      icon: <Utensils size={24} />,
      description: '选择营养密度高、升糖指数低的食物，有助于控制血糖和增强饱腹感。',
      steps: [
        '优先选择天然、未加工的食物',
        '多吃富含膳食纤维的蔬菜和水果',
        '选择优质蛋白质来源(鱼、鸡肉、鸡蛋、豆类等)',
        '限制精制碳水化合物和添加糖的摄入',
        '控制饱和脂肪和反式脂肪的摄入'
      ]
    },
    {
      id: 'meal-timing',
      title: '进食时间安排',
      icon: <Clock size={24} />,
      description: '合理安排进食时间，保持血糖稳定，避免过度饥饿导致暴饮暴食。',
      steps: [
        '早餐要营养均衡，避免空腹时间过长',
        '每3-4小时进食一次小餐或加餐',
        '训练前后适当补充蛋白质和碳水化合物',
        '晚餐不宜过晚，且热量不宜过高',
        '避免睡前2小时内大量进食'
      ]
    },
    {
      id: 'hydration',
      title: '饮水建议',
      icon: <Droplet size={24} />,
      description: '充足的水分摄入对于代谢、消化和减脂都非常重要。',
      steps: [
        '每天喝够2000-3000毫升水(约8-12杯)',
        '训练前后适当补充水分',
        '感到口渴时及时喝水，不要等到极度口渴',
        '避免含糖饮料和过量咖啡因',
        '可以适量饮用无糖茶或黑咖啡'
      ]
    }
  ],
  tips: [
    '记录饮食日记，追踪热量和营养素摄入',
    '使用小餐盘，有助于控制食物分量',
    '细嚼慢咽，充分感受饱腹感',
    '保持规律的睡眠，睡眠不足会影响代谢和食欲激素',
    '结合适量运动，提高减脂效率',
    '避免极端节食，选择可持续的饮食方式',
    '每周安排一次"欺骗餐"，缓解心理压力',
    '学习看食品标签，了解食物的营养成分'
  ]
};

export default function NutritionGuide() {
  const { theme } = useTheme();
  const [expandedMeal, setExpandedMeal] = useState<string | null>(null);
  const [age, setAge] = useState<number>(30);
  const [gender, setGender] = useState<'male' | 'female'>('male');
  const [activityLevel, setActivityLevel] = useState<string>('moderatelyActive');
  const navigate = useNavigate();
  
  // 计算示例用户的BMR和TDEE
  const bmr = calculateBMR(75, 183, 30, true);
  const tdee = calculateTDEE(bmr, activityLevel);
  const targetCalories = tdee - 500; // 减脂目标热量
  
  const toggleMeal = (mealId: string) => {
    setExpandedMeal(expandedMeal === mealId ? null : mealId);
  };

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-green-600 to-purple-500 bg-clip-text text-transparent">
            营养指导
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-green-50 via-white to-purple-50 dark:from-green-900/30 dark:via-slate-900 dark:to-purple-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">科学营养，助力健身目标</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                营养是健身成功的基石，合理的饮食计划不仅能帮助你减脂增肌，还能提升训练表现，加速身体恢复。
                本指南将教你如何制定个性化的饮食计划，并提供针对特定人群的减脂餐示例。
              </p>
              
              {/* 热量计算器 */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                <h3 className="text-lg font-semibold mb-4">基础代谢计算器</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                  <div>
                    <label htmlFor="age" className="text-sm text-slate-600 dark:text-slate-300 block mb-1">年龄</label>
                    <input
                      id="age"
                      type="number"
                      value={age}
                      onChange={(e) => setAge(Math.max(1, Math.min(120, parseInt(e.target.value) || 0)))}
                      min="1"
                      max="120"
                      className="w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                    />
                  </div>
                  <div>
                    <label className="text-sm text-slate-600 dark:text-slate-300 block mb-1">性别</label>
                    <div className="flex gap-2">
                      <button
                        onClick={() => setGender('male')}
                        className={`flex-1 px-3 py-2 rounded-lg text-center ${
                          gender === 'male' 
                            ? 'bg-blue-600 text-white' 
                            : 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white border border-slate-300 dark:border-slate-600'
                        }`}
                      >
                        男
                      </button>
                      <button
                        onClick={() => setGender('female')}
                        className={`flex-1 px-3 py-2 rounded-lg text-center ${
                          gender === 'female' 
                            ? 'bg-pink-600 text-white' 
                            : 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white border border-slate-300 dark:border-slate-600'
                        }`}
                      >
                        女
                      </button>
                    </div>
                  </div>
                  <div>
                    <label htmlFor="activity" className="text-sm text-slate-600 dark:text-slate-300 block mb-1">活动水平</label>
                    <select
                      id="activity"
                      value={activityLevel}
                      onChange={(e) => setActivityLevel(e.target.value)}
                      className="w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                    >
                      <option value="sedentary">久坐不动</option>
                      <option value="lightlyActive">轻度运动(每周1-3次)</option>
                      <option value="moderatelyActive">中度运动(每周3-5次)</option>
                      <option value="veryActive">高度运动(每周6-7次)</option>
                      <option value="extremelyActive">非常活跃(体力劳动或每天高强度训练)</option>
                    </select>
                  </div>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
                    <p className="text-sm text-slate-600 dark:text-slate-300 mb-1">基础代谢(BMR)</p>
                    <p className="font-bold text-lg">{calculateBMR(75, 183, age, gender === 'male')} 大卡/天</p>
                  </div>
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                    <p className="text-sm text-slate-600 dark:text-slate-300 mb-1">每日总消耗(TDEE)</p>
                    <p className="font-bold text-lg">{calculateTDEE(calculateBMR(75, 183, age, gender === 'male'), activityLevel).toFixed(0)} 大卡/天</p>
                  </div>
                  <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
                    <p className="text-sm text-slate-600 dark:text-slate-300 mb-1">减脂目标热量</p>
                    <p className="font-bold text-lg">{(calculateTDEE(calculateBMR(75, 183, age, gender === 'male'), activityLevel) - 500).toFixed(0)} 大卡/天</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 饮食计划制定指南 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-bold mb-8 text-center">如何制定饮食计划</h2>
            
            <div className="max-w-5xl mx-auto">
              {nutritionGuidelines.sections.map((section) => (
                <div 
                  key={section.id}
                  className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg mb-6"
                >
                  <div className="flex items-start mb-4">
                    <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mr-4 shrink-0">
                      {section.icon}
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">{section.title}</h3>
                      <p className="text-slate-600 dark:text-slate-300 mb-4">{section.description}</p>
                      <ul className="list-disc list-inside space-y-2 text-slate-600 dark:text-slate-300">
                        {section.steps.map((step, index) => (
                          <li key={index}>{step}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              ))}
              
              {/* 实用贴士 */}
              <div className="bg-gradient-to-r from-green-500 to-purple-500 rounded-2xl p-6 shadow-lg text-white">
                <h3 className="text-xl font-semibold mb-4 flex items-center">
                  <Award size={24} className="mr-2" />
                  饮食计划实用贴士
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {nutritionGuidelines.tips.map((tip, index) => (
                    <div key={index} className="flex items-start">
                      <i className="fa-solid fa-check-circle mt-1 mr-2"></i>
                      <p>{tip}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 减脂餐计划示例 */}
        <section className="py-10 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-bold mb-8 text-center">183cm/75kg 减脂餐计划示例</h2>
            
            <div className="max-w-5xl mx-auto">
              {/* 营养概览 */}
              <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg mb-8">
                <h3 className="text-xl font-semibold mb-4">每日营养概览</h3>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                  <div className="bg-slate-50 dark:bg-slate-700 rounded-xl p-4 flex flex-col items-center justify-center">
                    <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">热量目标</h4>
                    <p className="text-2xl font-bold">{sampleNutritionPlan.calories} 大卡</p>
                  </div>
                  <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                    <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">蛋白质</h4>
                    <p className="text-2xl font-bold">{sampleNutritionPlan.protein}g</p>
                  </div>
                  <div className="bg-yellow-50 dark:bg-yellow-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                    <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">碳水化合物</h4>
                    <p className="text-2xl font-bold">{sampleNutritionPlan.carbs}g</p>
                  </div>
                  <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                    <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">脂肪</h4>
                    <p className="text-2xl font-bold">{sampleNutritionPlan.fat}g</p>
                  </div>
                </div>
                <p className="text-slate-600 dark:text-slate-300 text-sm">
                  <i className="fa-solid fa-info-circle mr-1 text-blue-500"></i> 
                  此计划基于183cm、75kg、30岁男性的基础代谢和中度活动水平制定，每日热量缺口为500大卡。
                </p>
              </div>
              
              {/* 餐食详情 */}
              <div className="space-y-4">
                {sampleNutritionPlan.meals.map((meal) => (
                  <div 
                    key={meal.id}
                    className={`rounded-2xl overflow-hidden transition-all duration-300 ${
                      expandedMeal === meal.id 
                        ? 'ring-2 ring-green-500 dark:ring-green-400' 
                        : 'bg-white dark:bg-slate-800 shadow-lg'
                    }`}
                  >
                    <div 
                      className="flex flex-col md:flex-row cursor-pointer"
                      onClick={() => toggleMeal(meal.id)}
                    >
                      <div className="md:w-1/3">
                        <img 
                          src={meal.image} 
                          alt={meal.name}
                          className="w-full h-48 object-cover"
                        />
                      </div>
                      <div className="p-6 md:w-2/3">
                        <div className="flex justify-between items-center mb-2">
                          <h3 className="text-xl font-semibold">{meal.name}</h3>
                          <ChevronRight 
                            size={20} 
                            className={`transition-transform duration-300 ${
                              expandedMeal === meal.id ? 'rotate-90' : ''
                            }`}
                          />
                        </div>
                        <p className="text-slate-600 dark:text-slate-300 mb-4">{meal.description}</p>
                        <div className="flex flex-wrap gap-2">
                          <span className="px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-sm">
                            {meal.calories} 大卡
                          </span>
                          <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900/50 rounded-full text-sm">
                            蛋白质 {meal.protein}g
                          </span>
                          <span className="px-3 py-1 bg-yellow-100 dark:bg-yellow-900/50 rounded-full text-sm">
                            碳水 {meal.carbs}g
                          </span>
                          <span className="px-3 py-1 bg-green-100 dark:bg-green-900/50 rounded-full text-sm">
                            脂肪 {meal.fat}g
                          </span>
                        </div>
                      </div>
                    </div>
                    
                    {/* 展开内容 */}
                    {expandedMeal === meal.id && (
                      <div className="p-6 border-t border-slate-200 dark:border-slate-700">
                        <h4 className="font-semibold mb-3">食材清单</h4>
                        <div className="overflow-x-auto">
                          <table className="w-full text-left">
                            <thead>
                              <tr className="border-b border-slate-200 dark:border-slate-700">
                                <th className="pb-2 font-medium">食材</th>
                                <th className="pb-2 font-medium">用量</th>
                                <th className="pb-2 font-medium">热量(大卡)</th>
                                <th className="pb-2 font-medium">蛋白质(g)</th>
                                <th className="pb-2 font-medium">碳水(g)</th>
                                <th className="pb-2 font-medium">脂肪(g)</th>
                              </tr>
                            </thead>
                            <tbody>
                              {meal.ingredients.map((ingredient, index) => (
                                <tr key={index} className="border-b border-slate-100 dark:border-slate-800">
                                  <td className="py-2">{ingredient.name}</td>
                                  <td className="py-2">{ingredient.amount}</td>
                                  <td className="py-2">{ingredient.calories}</td>
                                  <td className="py-2">{ingredient.protein}</td>
                                  <td className="py-2">{ingredient.carbs}</td>
                                  <td className="py-2">{ingredient.fat}</td>
                                </tr>
                              ))}
                              <tr className="font-semibold">
                                <td className="py-2">总计</td>
                                <td className="py-2">-</td>
                                <td className="py-2">{meal.calories}</td>
                                <td className="py-2">{meal.protein}</td>
                                <td className="py-2">{meal.carbs}</td>
                                <td className="py-2">{meal.fat}</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* 饮食误区 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              <h2 className="text-2xl font-bold mb-8 text-center">常见饮食误区</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                  <div className="flex items-center mb-4">
                    <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center mr-3">
                      <i className="fa-solid fa-xmark text-red-600 dark:text-red-400"></i>
                    </div>
                    <h3 className="text-lg font-semibold">极端节食</h3>
                  </div>
                  <p className="text-slate-600 dark:text-slate-300">
                    过度限制热量摄入会导致肌肉流失、代谢下降，甚至引发健康问题。选择适度的热量缺口(300-500大卡)，才能健康可持续地减脂。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                  <div className="flex items-center mb-4">
                    <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center mr-3">
                      <i className="fa-solid fa-xmark text-red-600 dark:text-red-400"></i>
                    </div>
                    <h3 className="text-lg font-semibold">完全拒绝碳水化合物</h3>
                  </div>
                  <p className="text-slate-600 dark:text-slate-300">
                    碳水化合物是身体重要的能量来源，尤其是对于运动人群。选择复合碳水化合物(如燕麦、糙米、红薯)，控制精制碳水的摄入更为合理。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                  <div className="flex items-center mb-4">
                    <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center mr-3">
                      <i className="fa-solid fa-xmark text-red-600 dark:text-red-400"></i>
                    </div>
                    <h3 className="text-lg font-semibold">忽视蛋白质摄入</h3>
                  </div>
                  <p className="text-slate-600 dark:text-slate-300">
                    蛋白质对于维持肌肉量、增强饱腹感至关重要。减脂期间应确保充足的蛋白质摄入(每公斤体重1.6-2.2克)。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                  <div className="flex items-center mb-4">
                    <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center mr-3">
                      <i className="fa-solid fa-xmark text-red-600 dark:text-red-400"></i>
                    </div>
                    <h3 className="text-lg font-semibold">依赖补充剂</h3>
                  </div>
                  <p className="text-slate-600 dark:text-slate-300">
                    营养补充剂不能替代均衡饮食。应优先通过天然食物获取营养，仅在必要时(如蛋白质摄入不足)考虑使用补充剂。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 营养指导 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}